<template>
  <div id="members">
    <!-- <router-link
    v-for="item of numbers"
    :to="{name: 'Numdetail', params: {id: item.id}}"
    class="member"
    :key="item.id"
    tag="div">
      <div class="content">
        <p>{{item.post}}-{{item.name}}</p>
        <span>{{item.message}}</span>
      </div>
      <div class="img">
        <img :src="item.img">
      </div>
    </router-link> -->
    <div v-for="item of numbers"  :key="item.id">
      <a
      :href="item.url"
      class="member">
        <div class="content">
          <p>{{item.post}}-{{item.name}}</p>
          <span>{{item.message}}</span>
        </div>
        <div class="img">
          <!-- <img src="../assets/num1.png" alt=""> -->
          <img v-lazy="item.img">
        </div>
      </a>
    </div>
    <!-- <div class="member" @click="goDetail">
      <div class="content">
        <p>永远名誉会长-陈新贤</p>
        <span>2001年全国第一次医改时，陈新贤先生先后出资数亿元整…</span>
      </div>
      <div class="img">
        <img src="../assets/num2.png" alt="">
      </div>
    </div>
    <div class="member" @click="goDetail">
      <div class="content">
        <p>名誉会长-孙江榕</p>
        <span>祖籍福建，经济学硕士、高级经济师、中国闽商企业家杰…</span>
      </div>
      <div class="img">
        <img src="../assets/num3.png" alt="">
      </div>
    </div>
    <div class="member" @click="goDetail">
      <div class="content">
        <p>名誉会长-卓朝阳</p>
        <span>卓朝阳创始人、董事长兼首席执行官2008年投资创办安琪..</span>
      </div>
      <div class="img">
        <img src="../assets/num4.png" alt="">
      </div>
    </div>
    <div class="member" @click="goDetail">
      <div class="content">
        <p>名誉会长-张桂芳</p>
        <span>1988年9月开始，张桂芳同志先后创办了福建惠安群芳有…</span>
      </div>
      <div class="img">
        <img src="../assets/num5.png" alt="">
      </div>
    </div> -->
    <div class="bottom">暂时没有更多了~</div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Lazyload } from 'mint-ui'
import numbers from '../Data/numbers'

Vue.use(Lazyload)

export default {
  name: 'Number',
  data () {
    return {
      numbers: numbers
    }
  },
  created: function setTitle () {
    document.title = '领导班子'
  }
}
</script>

<style lang="scss" scoped>
  #members{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    .member{
      display: block;
      text-decoration: none;
      height: 24.5vw;
      background-color: #fff;
      margin-top: 2.66vw;
      padding: 4vw 2.66vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow:0px 2px 8px 0px rgba(0,0,0,0.16);
      .content{
        width: 71.68vw;
        height: 25.66vw;
        p{
          height: 7.33vw;
          font-size: 4.26vw;
          font-family: SourceHanSansCN-Bold;
          font-weight: bold;
          color: rgba(22,22,22,1);
          // line-height: 8px;
          margin-top: 3vw;
        }
        span{
          font-size: 3.46vw;
          font-family: SourceHanSansCN-Regular;
          font-weight: 400;
          color: rgba(104,104,104,1);
          line-height: 8vw;
          overflow:hidden;
          text-overflow:ellipsis;
          display:-webkit-box;
          -webkit-box-orient:vertical;
          -webkit-line-clamp:2;
          height: 16vw;
        }
      }
      .img{
        width: 17.06vw;
        height: 20.53vw;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .bottom{
      width: 100%;
      height: 16.8vw;
      text-align: center;
      line-height: 16.8vw;
      font-size: 3.46vw;
      font-family: SourceHanSansCN-Regular;
      font-weight: 400;
      color: rgba(104,104,104,1);
    }
  }
</style>
